<html ng-app="diandanbao" class="ng-scope">
<head>
    <style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}</style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta content="telephone=no" name="format-detection">
    <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
    <title>预订订单</title>
    <link data-turbolinks-track="true" href="{RES}/mobile/{php echo $this->cur_tpl}/assets/diandanbao/weixin.css" media="all" rel="stylesheet">
    <style type="text/css">@media screen{.smnoscreen {display:none}} @media print{.smnoprint{display:none}}</style>
    <script src="{RES}/mobile/{php echo $this->cur_tpl}/assets/diandanbao/common.min.js"></script>
    <script src="{RES}/mobile/{php echo $this->cur_tpl}/assets/diandanbao/gg.min.js"></script> 
    <link rel="stylesheet" href="{RES}/mobile/{php echo $this->cur_tpl}/assets/diandanbao/common.min.css">
    <link rel="stylesheet" href="{RES}/mobile/{php echo $this->cur_tpl}/assets/diandanbao/page-6c7ae247c5.min.css">
    
</head>
<body>
<div ng-view="" style="height: 100%;" class="ng-scope">
    <div class="ddb-nav-header ng-scope" common-header="">
        <div class="nav-left-item" onclick="location.href='{php echo $this->createMobileUrl('detail', array('id' => $storeid, 'mode' => 3), true)}';"><i class="fa fa-angle-left"></i></div>
        <div class="header-title ng-binding">预订时间</div>
    </div>
    <div class="section ng-scope" style=" margin-top: 40px;margin-bottom: 0px;">
        <div class="list-item  ddb-form-control custom-form-element ng-scope">
            <div class="ddb-form-label ng-binding">预订日期</div>
            <select id="reservation_date" class="ng-valid ng-scope ng-dirty ng-valid-parse ng-touched"><!-- onchange="changeDate(this);"-->
                {loop $dates $date}
                <option value="{$date}" {if $date==$select_date}selected="selected"{/if}>{$date}</option>
                {/loop}
            </select>
        </div>
    </div>
<!--时间-->
<link rel="stylesheet" type="text/css" href="../addons/smart_ct/plugin/clockpicker/standalone.css" media="all">
<link rel="stylesheet" type="text/css" href="../addons/smart_ct/plugin/clockpicker/clockpicker.css" media="all">
<script src="./resource/js/lib/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../addons/smart_ct/plugin/clockpicker/clockpicker.js"></script>
<script>
 
$.noConflict();
jQuery( document ).ready(function( $ ) {
  // Code that uses jQuery's $ can follow here.
  $('.clockpicker').clockpicker();
});
</script>
    <div class="section ng-scope" style="margin-top: 15px;margin-bottom: 0px;">
        <div class="list-item  ddb-form-control custom-form-element ng-scope">
            <div class="ddb-form-label ng-binding">预订时间</div>
                          <!-- <div class="input-group clockpicker">-->
                            <input id="reservation_time" type="text" class="form-control" value="{if empty($item['time'])}09:00{else}{$item['time']}{/if}" name="time">
                          <!--  <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                        </div>-->
            <!--<select id="reservation_time" class="ng-valid ng-scope ng-dirty ng-valid-parse ng-touched" style="width: 30%;"> 
                <option value="0">请选择时间</option>
                 {loop $list $time}
                <option value="{$time['id']}" {if $time==$select_date}selected="selected"{/if}>{$time['time']}</option>
                {/loop}
            </select>-->
        </div>
    </div>
    <div class="main-view ng-scope" id="time-points-index" style="padding-top: 1px;">
        <!--<div class="notification-section">-->
            <!--<div class="notice">-->
                <!--<i class="fa fa-volume-up red"></i>-->
                <!--<marquee behavior="alternate" scrollamount="1" scrolldelay="1">&nbsp;20分钟未到店，商家有权取消本次预订，请安排好您的时间&nbsp;</marquee>-->
            <!--</div>-->
        <!--</div>-->  
        </div>

        <div class="ng-scope"> 
            <header>
                <section class="top-menu"> 
                    <span  style="margin-left: 10px;"><img src="{RES}/mobile/{php echo $this->cur_tpl}/assets/diandanbao/222.png" alt=""></span>
                   <div id="J_top_menu" class="top-menu-list">  
                            {loop $tablezones $item}
                            <a src="0" rel="{$item['id']}">{$item['title']}</a>
                            {/loop}  
                    </div> 
                    <span style="margin-right: 10px;" class='span_2'><img style="width: 22px;margin-top: -2px;" src="{RES}/mobile/{php echo $this->cur_tpl}/assets/diandanbao/111.png" alt=""></span>
                </section>
            </header> 
        </div> 
        <div class='h31'>
            <div class='h41'  >  
                    <div class="img_WZ"> <!--座位图-->
                    </div>
                    <div class='WZ_Z'>
                        <ul class="WZ_Z_1"><!--座位列表-->
                                  
                        </ul>
                    </div> 
                     
                 </div>
            

        </div>  
<div class='button_1'>
     <a onclick="next();">下一步</a> 
 </div>
    
       
    </div>
</div>

<input type="hidden" id="select_date" name="select_date" value="{$select_date}">
<script type="text/javascript" src="../addons/smart_ct/template/js/2/jQuery.js"></script>
<style type="text/css"> 
   .selected{color: #DD551A !important;} 
</style>
<script>
//    function changeDate(obj) {
//        var date = obj.value;
//        var url = "{php echo $this->createMobileUrl('ReservationIndex', array('storeid' => $storeid), true)}" + "&selectdate=" + date;
//        window.location.href = url;
//    }
     /**下一步逻辑***/
    function next() {
			if($("#reservation_date").val()==null){
				alert("请您选择日期！");
				return;
			}
            var reE =  /^([0-2][0-9]):([0-5][0-9])$/;
            var reC =  /^([0-2][0-9])：([0-5][0-9])$/;
            var resultE=  reE.test($('#reservation_time').val());
            var resultC=  reC.test($('#reservation_time').val());
            if(resultE||resultC){
                var date = $("#reservation_date").val();//日期
				var time = $("#reservation_time").val();//时间
				var zuoid = 0; //选中的坐
				var zuotypeid = 0; //选中的坐
				var zuo = $(".WZ_Z_1").children("li");//坐的数组
        
				for(var i = 0;i<zuo.length;++i){
					if($(zuo[i]).attr("src")==1){
						zuoid = $(zuo[i]).attr("rel");
					}
				}
				if(zuoid==null||zuoid==0){
                    alert("请您选择座位！");
					return;
                }
				var zuotype = $(".top-menu-list").children("a");
				for(var i=0;i<zuotype.length;i++){
					if($(zuotype[i]).attr("src")==1){
						zuotypeid = $(zuotype[i]).attr("rel");
					}
				}
				if(zuotypeid==null||zuotypeid==0){
                    alert("请您选择座位类型！");
					return;
                }
				var url = "{php echo $this->createMobileUrl('Reservationstep1', array('storeid' => $storeid), true)}" + "&selectdate=" + date+ "&selecttime=" + time+ "&zuoid=" + zuoid+ "&zuotypeid=" + zuotypeid;
				window.location.href = url;
            }else{
                alert("您输入的时间有误！");
                $('#reservation_date').focus();
            }
        
    }
    /**选座逻辑***/
    function selectzuo(obj){
        var zuo = $(".WZ_Z_1").children("li");
        for(var i = 0;i<zuo.length;++i){
            $(zuo[i]).attr("src","0");
            $(zuo[i]).find(".table_status").removeClass('b4b4b4');
        }
        $(obj).attr("src","1");
        $(obj).find(".table_status").addClass('b4b4b4'); 
    }

//    function selectTime(id) {
//        var select_date = $("#select_date").val();
//        var url = "{php echo $this->createMobileUrl('ReservationDetail', array('storeid' => $storeid), true)}" + "&selectdate=" + select_date + "&timeid=" + id;
//        window.location.href = url;
//    }
    
//    $(function(){
//            $(".H21 li").click(function(event) {
//                var index = $(this).index();  
//                $('.h31 .h41').eq(0).css('display','none');
//                $('.h31 .h41').eq(index).show().siblings().hide();
//            });
//    });
    $(document).ready(function(){ 
        
        $("#J_top_menu a").siblings('a').eq(0).removeClass('selected').trigger('click');  
    });
    $("#J_top_menu a").click(function() { 
             $(this).siblings('a').removeClass('selected'); 
             $(this).addClass('selected'); 
             var typeid =$(this).attr('rel');
             getdata(typeid);
             var zuotype = $(".top-menu-list").children("a");
             for(var i=0;i<zuotype.length;i++){
                 $(zuotype[i]).attr("src","0");
             }
             $(this).attr("src","1");
    });
   
    
    function getdata(typeid){
        var htmlinsert="";
        var imginsert="";
                    var url = "{php echo $this->createMobileUrl('Getdata', array('storeid' => $storeid ), true)}";
                    $.ajax({
                        url: url, type: "post", dataType: "json", timeout: "10000",
                        data: {
                            "typeid": typeid,
                        },
                        success: function (data) {
                            if(data.message['code']!=0){
                                for(var i = 0;i<data.message['listbytpyid'].length;i++){
                                    var id = data.message['listbytpyid'][i]['id'];
                                    var status = data.message['listbytpyid'][i]['status'];
                                    var title = data.message['listbytpyid'][i]['title'];
                                    var user_count = data.message['listbytpyid'][i]['user_count'];
                                    if(status==0){
                                        status = "空闲";
                                    }else if(status==1){
                                        status = "开台";
                                    }else if(status==2){
                                        status = "已下单";
                                    }else if(status==3){
                                        status = "已支付";
                                    }
                                    htmlinsert=htmlinsert+'<li src="0" rel="'+id+'" onclick="selectzuo(this);"> <ul> <li class="table_status">'+status+'</li><li>'+title+'</li><li>'+"("+user_count+"人位)"+'</li></ul></li>';
                                }
                                $(".WZ_Z_1").html(htmlinsert);
                            }else{
                                alert("网络不稳定，请重新尝试!");
                            }
                        },error: function () {
                           alert("数据提交失败！");
                       }
                  });
                  var url_type = "{php echo $this->createMobileUrl('Gettype', array('storeid' => $storeid ), true)}";
                  $.ajax({
                        url: url_type, type: "post", dataType: "json", timeout: "10000",
                        data: {
                            "typeid": typeid,
                        },
                        success: function (data) {
                            if(data.message['code']!=0){
                                    var imgsrc = data.message['tablezoneslist'][0]['imgpic'];
                                    if(imgsrc==null||imgsrc==""){
                                       imginsert="<img src='http://pic.pptbz.com/pptpic/201204/2012041411433867_S.jpg' style='width: 100%;height: 150px;'>";
                                                             
                                    }else{
                                       imginsert="<img src='http://tianchao.sin-o.com/attachment/"+imgsrc+"' style='width: 100%;height: 150px;'>";
                                    }
                                   $(".img_WZ").html(imginsert);
                            }else{
                                alert("网络不稳定，请重新尝试!");
                            }
                        },error: function () {
                           alert("数据提交失败！");
                       }
                  });
    }
 
</script>
</body>
</html>

